<template>
  <div style="width:100vw;" class="patent-box">
    <div style="padding:5px;" class="record-header">
      <div @click="searchPopup" class="search-box">
        <div class="flex-row search-input">
          <div class="iconfont iconsousuo"></div>
          <div>搜索</div>
        </div>
      </div>
    </div>
    <div class="divler"></div>
    <div>
      <div class="page-tab-container">
        <!-- cell组件 -->
        <div class="bscroll" ref="classList">
          <div :style="loadedDown ? 'padding-bottom:50px;' : ''" class="bscroll-container">
            <div class="default-page-box" v-show="classList.length == 0">
              <div class="default-page">
                <div class="default-text">哎呀，空空如也!</div>
              </div>
            </div>
            <div v-for="(item,index) in classList" :key="index" class="patent-body">
              <div
                @click="goDetail(item.id,3,item.isSign,item.courseType)"
                v-if="item.courseType != 2"
              >
                <div class="flex-row parent-body-item">
                  <div class="class-content">
                    <p class="content-tip">{{item.title}}</p>
                    <p class="content-time">培训时间：{{item.openTime}}</p>
                    <p class="content-bumen">归属部门：{{item.deptName || '外部导师'}}</p>
                    <p class="content-teacher">
                      <span style="color:#4787e4;margin-right:5px;" class="iconfont iconxingming"></span>
                      讲师：{{item.username}}
                    </p>
                  </div>
                  <div
                    class="class-status"
                  >{{item.isSign == 0 ? '未报名' : item.isSign == 1 ? '已报名' : ''}}</div>
                </div>
              </div>
              <div
                v-else
                @click="goDetail(item.id,3,item.isSign,item.courseType,item.fileType)"
                class="parent-body-item"
              >
                <div class="flex-row class-video-top">
                  <div class="class-content">
                    <p class="content-tip">{{item.title}}</p>
                    <p class="content-time">观看时间：{{item.updateTime}}</p>
                  </div>
                  <div
                    :style="`background-image:url(${item.photo || require('@/assets/homePicture/detail1.jpg')});`"
                    class="class-video"
                  ></div>
                </div>
                <div class="class-video-foot flex-row">
                  <div>微课程</div>
                  <!-- <div>已看</div> -->
                </div>
              </div>
              <div class="divler"></div>
            </div>
            <div v-show="loadingDown" style="padding:10px;text-align:center;">
              <mt-spinner type="snake"></mt-spinner>
            </div>
            <div v-show="loadedDown" style="line-height:50px;text-align:center;">没有更多数据</div>
          </div>
        </div>
      </div>
    </div>
    <mt-popup v-model="popupVisible" position="right">
      <div class="search-popup">
        <div class="select-body">
          <div class="salary">课程名称</div>
          <input
            class="input1"
            v-model="params.courseName"
            placeholder="请输入课程名称"
            name="salary"
            type="text"
          />
          <div class="city-choice">导师名称</div>
          <input
            class="input1"
            v-model="params.teaName"
            placeholder="请输入导师名称"
            name="city"
            type="text"
          />
          <div class="city-choice">时间范围</div>
          <div class="flex-row">
            <div>
              <input
                @click="handleCommentFocus"
                v-model="params.startTime"
                readonly
                class="input2"
                placeholder="开始时间"
                name="city"
                type="text"
              />
            </div>
            <div style="margin:0 20px;">-</div>
            <div>
              <input
                @click="handleCommentFocuss"
                class="input2"
                readonly
                v-model="params.endTime"
                placeholder="结束时间"
                name="city"
                type="text"
              />
            </div>
          </div>
        </div>
        <div class="select-foot">
          <span class="clear" @click="clear">清除</span>
          <span class="finish" @click="finish">完成</span>
        </div>
      </div>
    </mt-popup>
    <mt-datetime-picker
      v-model="currentDate"
      :endDate="new Date('2030-12-31')"
      @confirm="handleConfirm"
      ref="pickerDate"
      type="date"
      year-format="{value} 年"
      month-format="{value} 月"
      date-format="{value} 日"
    ></mt-datetime-picker>

    <mt-datetime-picker
      v-model="currentDate"
      :endDate="new Date('2030-12-31')"
      @confirm="handleConfirms"
      ref="pickerDates"
      type="date"
      year-format="{value} 年"
      month-format="{value} 月"
      date-format="{value} 日"
    ></mt-datetime-picker>
  </div>
</template>
<script>
import BScroll from "better-scroll";
import { setText } from "../../untils/ddnavigate";
import { Indicator, Toast } from "mint-ui";
import { parse } from "path";
const easydate = require("../../untils/easydate");
export default {
  name: "testUI",
  data() {
    return {
      active: "tab-container1",
      popupVisible: false,
      classList: [],
      currentDate: "",
      params: {
        courseName: "",
        teaName: "",
        startTime: "",
        endTime: "",
        page: 1,
        pageSize: 10
      },
      loadingDown: false,
      loadingUp: false,
      loadedDown: false
    };
  },
  mounted() {
    let { params } = this;
    let currentDate = easydate().format("yyyy-MM-dd");
    this.currentDate = currentDate;
    this.$post("qrySignCourse", params).then(res => {
      if (res.success) {
        this.classList = res.data;
        if (res.data && res.data.length > 0) {
          res.data.map(function(item) {
            for (var key in item) {
              if (key == "openTime" || key == "updateTime") {
                item[key] = easydate(item[key]).format("yyyy-MM-dd");
              }
            }
          });
          this.pageTotal = res.data && res.data[0].totals;
        }
        this.classList = res.data;
      }
    });
    // 设置标题文字
    setText("课程列表");
    // better-scroll初始化
    let that = this;
    let bscrollDom = that.$refs.classList;
    that.$nextTick(() => {
      that.bScroll = new BScroll(bscrollDom, {
        click: true,
        probeType: 2,
        bounceTime: 700, //回弹时间
        pullUpLoad: {
          threshold: 0, // 当上拉距离超过50px时触发 pullingUp 事件
          stop: 50
        },
        useTransition: false // 防止iphone微信滑动卡顿
      });
      // bScroll.on("pullingDown", () => {
      //   that.loadingUp = true;
      //   that.loadedDown = false;
      //   that.params.page = 1;
      //   setTimeout(() => {
      //     that.classFunction(that.params, dom, "downLoad");
      //   }, 1000);
      //   bScroll.finishPullDown();
      // });
      that.bScroll.on("pullingUp", () => {
        let { pageTotal } = that;
        if (that.classList.length < pageTotal) {
          that.loadingDown = true;
          setTimeout(() => {
            that.params.page++;
            that.classFunction(that.params);
          }, 1000);
        } else {
          that.loadedDown = true;
        }
        that.bScroll.finishPullUp();
      });
      that.bScroll.refresh();
    });
  },
  methods: {
    handleConfirms(e) {
      console.log(easydate(e).format("yyyy-MM-dd"));
      if (!this.params.startTime) {
        Toast({
          message: "请先选择开始时间",
          position: "center",
          duration: 2000
        });
        return;
      }
      if (easydate(e).isBefore(this.params.startTime)) {
        Toast({
          message: "结束时间不能早于开始时间",
          position: "center",
          duration: 2000
        });
        return;
      }
      this.params.endTime = easydate(e).format("yyyy-MM-dd");
    },
    handleConfirm(e) {
      console.log(easydate(e).format("yyyy-MM-dd"));
      this.params.startTime = easydate(e).format("yyyy-MM-dd");
      this.params.endTime = "";
    },
    handleCommentFocus() {
      this.$refs.pickerDate.open();
    },
    handleCommentFocuss() {
      this.$refs.pickerDates.open();
    },
    clear() {
      this.params = {
        courseName: "",
        teaName: "",
        startTime: "",
        endTime: "",
        page: 1,
        pageSize: 10
      };
    },
    finish() {
      this.params.page = 1;
      this.classList = [];
      this.loadedDown = false;
      let dom = this.$refs.classList;
      this.bScroll.scrollTo(0, 0, 0);
      this.classFunction(this.params);
    },
    searchPopup() {
      this.popupVisible = true;
    },
    classFunction(params) {
      let that = this;
      that.$post("qrySignCourse", params).then(res => {
        if (res.success) {
          that.popupVisible = false;
          if (res.data && res.data.length > 0) {
            res.data.map(function(item) {
              for (var key in item) {
                if (key == "openTime" || key == "updateTime") {
                  item[key] = easydate(item[key]).format("yyyy-MM-dd");
                }
              }
            });
            that.pageTotal = res.data && res.data[0].totals;
          }
          that.classList = that.classList.concat(res.data);
          that.loadingDown = false;
          that.loadingUp = false;
        } else {
          that.loadingDown = false;
          that.loadingUp = false;
        }
      });
    },
    goDetail(id, num, isSign, smallCourse, fileType) {
      if (smallCourse == 2) {
        if (fileType == 0) {
          this.$router.push({
            path: "/learnClass",
            query: { id }
          });
        } else {
          this.$router.push({
            path: "/pdf",
            query: { id }
          });
        }
        return;
      }

      if (isSign == 1) {
        num = 4;
      }
      this.$router.push({
        path: "/classDetail",
        query: { id: id, statusNum: num }
      });
    }
  }
};
</script>
 
<style lang="less" scoped>
@import url("~@/pagecss/my-class.less");
@import url("~@/pagecss/select-info.less");
.bscroll-container {
  padding-bottom: 100px;
}
.content-tip {
  width: 400/75rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.class-video {
  width: 259/75rem;
  height: 124/75rem;
  background-position: 50% 50%;
  background-size: cover;
}
.class-video-foot,
.class-video-top {
  align-items: flex-start;
  justify-content: space-between;
}
.class-video-foot {
  margin-top: 20/75rem;
  padding-bottom: 10px;
  font-size: 18/75rem;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.5);
}
.default-page-box {
  position: relative;
  height: 100vh;
}
.default-page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("~@/assets/studyCenter/null.png") 50% 30% no-repeat;
  background-size: 352/75rem 215/75rem;
}
.default-text {
  left: 0;
  right: 0;
  position: absolute;
  top: 45%;
  text-align: center;
  font-size: 30/75rem;
  font-weight: 400;
  color: rgba(110, 176, 246, 0.7);
}
.divler {
  height: 15/75rem;
  background-color: #eeeeee;
}
.item {
  display: inline-block;
}

.nav {
  padding: 10px;
}

.link {
  color: inherit;
  padding: 20px;
  display: block;
}
</style>
